<template>
    <div>
        <div style="display:flex">
            <search @search="searchs"></search> <el-button type="primary" @click="add">添加商品</el-button>
        </div>
        <Tables :data="data" :cols="cols" :pageNum="this.pagenum" :pageSize="this.pagesize" :total="this.total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
            <template v-slot:time='{row}'>
                {{new Date(row.add_time).toLocaleString()}}
            </template>
            <template v-slot:action='{row}'>
                <el-button type="primary" size="mini" icon="el-icon-edit"  title="编辑" @click="edit(row.goods_id)"></el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete"  title="删除" @click="dels(row.goods_id)"></el-button>
            </template>
        </Tables>

         <el-dialog
        :title="title"
        :visible.sync="show"
        width="30%">
            <el-form ref="form"  :model="goodsFrom" label-width="80px">
              <el-form-item label="商品名称"  prop="username">
                  <el-input v-model="goodsFrom.goods_name"></el-input>
              </el-form-item>
              <el-form-item label="商品价格"  prop="username">
                  <el-input v-model="goodsFrom.goods_price"></el-input>
              </el-form-item>
              <el-form-item label="商品数量"  prop="username">
                  <el-input v-model="goodsFrom.goods_number"></el-input>
              </el-form-item>
              <el-form-item label="商品重量"  prop="username">
                  <el-input v-model="goodsFrom.goods_weight"></el-input>
              </el-form-item>
          </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button >取 消</el-button>
            <el-button type="primary" @click="addGood">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import Tables from "../../components/table.vue";
import search from "../../components/search.vue";
import { goodsList, addGoods, editGoods, editsGoods,del } from "../../api/goods.js";
export default {
  components: { Tables, search },
  data() {
    return {
      id: 0,
      addAndEdit: false,
      goodsFrom: {
        goods_name: "",
        goods_price: "",
        goods_weight: "",
        goods_number: "",
        goods_cat: "1,2,3"
      },
      show: false,
      title: "",
      pagenum: 1,
      pagesize: 10,
      data: [],
      total: 0,
      cols: [
        {
          label: "#",
          type: "index"
        },
        {
          label: "商品名称",
          name: "goods_name"
        },
        {
          label: "商品价格",
          name: "goods_price"
        },
        {
          label: "商品重量",
          name: "goods_weight"
        },
        {
          label: "创建时间",
          name: "add_time",
          slot: "time"
        },
        {
          label: "操作",
          slot: "action",
          align: "center",
          width: 270
        }
      ]
    };
  },
  mounted() {
    this.getgoods();
  },
  methods: {
    async getgoods() {
      let res = await goodsList({
        pagenum: this.pagenum,
        pagesize: this.pagesize
      });
      console.log(res);
      this.data = res.data.data.goods;
      this.total = res.data.data.total;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getgoods();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getgoods();
    },
    async searchs(val) {
      console.log(val);
      let res = await goodsList({
        query: val,
        pagenum: this.pagenum,
        pagesize: this.pagesize
      });
      console.log(res);
      this.data = res.data.data.goods;
      this.total = res.data.data.total;
    },
    add() {
      this.show = true;
      this.title = "添加商品";
      this.addAndEdit = true;
    },
    async addGood() {
      if (this.addAndEdit == true) {
        addGoods(this.goodsFrom);
        this.show = false;
        this.getgoods();
      } else {
          console.log(this.id,this.goodsFrom);
        editsGoods(this.id,this.goodsFrom).then(res=>{
            console.log('123',res);
        });
        this.show = false;
        this.getgoods();
        this.goodsFrom = {
          goods_name: "",
          goods_price: "",
          goods_weight: "",
          goods_number: "",
          goods_cat: "1,2,3"
        };
      }
    },
    async edit(val) {
      let res = await editGoods(val);
      console.log(res);
      this.goodsFrom = res.data.data;
      console.log(val);
      this.title = "编辑商品";
      this.id = val;
      this.show = true;
      this.addAndEdit = false;
    },
    dels(val){
        del(val)
        this.getgoods();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>